<template>
  <div class="inputNumber">
    <div class="numberbox">
      <div @click="up(v)" class="item" v-for="v in 9" :key="v">{{ v }}</div>
      <div @click="up('.')" class="item">.</div>
      <div @click="up(0)" class="item">0</div>
      <div @click="up(-1)" class="item"><span class="delete"></span></div>
    </div>
    <div :class="['btn', { disabled: disabled }]" @click="query">
      {{ btntext }}
    </div>
    <div :value="value" style="display: none"></div>
  </div>
</template>

<script>
export default {
  name: "inputNumber",
  props: {
    btntext: String,
  },
  data() {
    return {
      disabled: true,
      value: "",
    };
  },
  watch: {
    value(newValue) {
      if (newValue == "") {
        this.disabled = true;
      } else {
        this.disabled = false;
      }
    },
  },
  methods: {
    up(value) {
      console.log(value);
      if (value == -1) {
        if (this.value.length == 0 || this.value == "") {
          return;
        }
        this.value = this.value.substring(0, this.value.length - 1);
      } else {
        this.value += value;
      }
      this.value += value;
      this.$emit("update", value);
    },
    query() {
      this.$emit("query");
    },
  },
};
</script>

<style lang="less" scoped>
.inputNumber {
  width: 750px;
  height: 675px;
  opacity: 1;
  background: rgba(246, 247, 252, 1);
  background-color: #ab4d41;
  position: fixed;
  bottom: 0;
  padding: 30px;
  .numberbox {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .item {
      user-select: none;
      width: 200px;
      height: 100px;
      opacity: 1;
      // background: rgba(255, 255, 255, 1);
      background: #e5c184;
      box-shadow: 0px 3px 2px 0px rgba(221, 225, 242, 1);
      margin-bottom: 26px;
      font-size: 58px;
      font-weight: 400;
      letter-spacing: 0px;
      color: rgba(112, 126, 162, 1);
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 20px;
        // transition: all 0.05s;
      &:active {
        transform: translateY(2px);
      }
    }
    .delete {
      width: 100%;
      height: 100%;
      display: inline-block;
      background: url("~@/assets/img/delete.png") center/60px 60px no-repeat;
    }
  }
  .btn {
    width: 682px;
    height: 110px;
   /**background: linear-gradient(
      178.44deg,
      rgba(238, 220, 201, 1) 0%,
      rgba(220, 188, 155, 1) 100%
    );
    box-shadow: 1px 7px 8px 0px rgba(201, 173, 144, 0.51);**/
     background: url("~@/assets/img/19.png") center/100% 100% no-repeat;
    font-size: 28px;
    font-weight: 800;
    letter-spacing: 0px;
    // color: rgba(255, 255, 255, 1);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    // transition: all 0.05s;
    user-select: none;

    &:active {
      transform: translateY(2px);
    }

    &.disabled {
      background: #ccc;
      box-shadow: 1px 7px 8px 0px rgba(201, 173, 144, 0);
    }
  }
}
</style>
